import { readonly, ref, shallowRef } from 'vue'
import { defineStore } from 'pinia'
import ForgetPassword from '@/pages/auth/ForgetPassword.vue'
import Login from '@/pages/auth/Login.vue'
import ResetLinkSent from '@/pages/auth/ResetLinkSent.vue'
import SignUp from '@/pages/auth/SignUp.vue'
import { AUTH_ROUTES } from '@const'
import { trackEvent } from '@/gtm'

export const useAuthRouteStore = defineStore('authRoute', () => {
  const routes = ref([
    { value: AUTH_ROUTES.LOGIN, component: shallowRef(Login) },
    { value: AUTH_ROUTES.FORGET_PASSWORD, component: shallowRef(ForgetPassword) },
    { value: AUTH_ROUTES.SIGN_UP, component: shallowRef(SignUp) },
    { value: AUTH_ROUTES.RESET_LINK_SENT, component: shallowRef(ResetLinkSent) },
  ])

  const now = ref(routes.value.LOGIN)

  const _meta = ref({
    resetPwdEmail: '',
  })

  function to(value, { resetPwdEmail = '' } = {}) {
    triggerGtm(value)
    now.value = value

    if (resetPwdEmail) {
      _meta.value.resetPwdEmail = resetPwdEmail
      console.log('resetPwdEmail:', resetPwdEmail)
    }
  }

  function triggerGtm(route) {
    switch (route) {
      case AUTH_ROUTES.LOGIN:
        trackEvent({ key: 38 })
        break
      case AUTH_ROUTES.SIGN_UP:
        trackEvent({ key: 40 })
        break
      default:
        console.warn('gtmTrack: Hey! Unknow Route! You forgot to track this route!')
        break
    }
  }

  function clearMeta() {
    _meta.value = {
      resetPwdEmail: '',
    }
  }

  return { routes, now, to, meta: readonly(_meta), clearMeta }
})
